<template>
  <div class="latest">
    <div class="top">
      <span class="songT">歌曲</span>
      <span class="songerT">歌手</span>
      <span class="albumT">专辑</span>
    </div>
        <!-- 歌曲详情 -->
        <div class="child" v-for="(item, index) in Flist" :key="index">
          <div class="song_name"><span>❤</span>{{ item.name }}</div>
          <div class="songer">{{ item.songer }}</div>
          <div class="album">{{item.album}}</div>
        </div>
  </div>
</template>

<script>
export default {
  props: {
    Flist: {
      type: Array,
    },
  },
};
</script>

<style scoped>
.latest {
  margin: 30px;
}
.top {
  display: flex;
}
.latest span {
  width: 33%;
  font-weight: bold;
}
.child {
  display: flex;
  justify-content: start;
  margin-top: 20px;
  
}
.child .song_name {
  width: 100px;
}
.child span {
  margin-left: -20px;
  color: red;
}
.child .songer {
  width: 150px;
  margin-left: 110px;
}
.child .album {
  margin-left: 60px;
}
</style>